<template>
  <div>
    <el-breadcrumb class="breadcrumb-row" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>借阅管理</el-breadcrumb-item>
      <el-breadcrumb-item>图书借阅记录</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-table :data="list.data" border stripe size="small" style="width: 100%">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="book_id" label="图书ID"></el-table-column>
        <el-table-column prop="book.b_title" label="图书名称"></el-table-column>
        <el-table-column prop="book.b_publisher" label="图书出版社"></el-table-column>
        <el-table-column prop="book.b_author" label="图书作者"></el-table-column>
        <el-table-column prop="user.nickname" label="借阅人"></el-table-column>
        <el-table-column prop="user_id" label="借阅者ID"></el-table-column>
        <el-table-column prop="create_time" label="借出时间" sortable width="200px"></el-table-column>
        <el-table-column prop="update_time" label="归还时间" sortable width="200px"></el-table-column>
        <el-table-column prop="status"
                         label="状态"
                         :filters="[{ text: '已归还', value: 2 }, { text: '未归还', value: 0 }]"
                         :filter-method="filterMethod"
                         filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status==2?'primary' : 'success'" disable-transitions>
              {{ scope.row.status == 2 ? '已归还' : '未归还' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background
                     layout="total,prev, pager, next"
                     :page-size="list.pageSize"
                     :total="list.total"
                     @current-change=pageChange>
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {borrow, status} from "../../request";

export default {
  data() {
    return {
      params: {},
      list: {
        total: 0,
        pageSize: 15,
        data: []
      }
    };
  },
  created() {
    this.getBorrowList();
  },
  methods: {
    async getBorrowList() {
      const data = await borrow.list(this.params);
      if (data.code == status.SUCCESS) {
        this.list.data = data.data.data;
        this.list.total = data.data.total;
      }
    },
    filterMethod(value, row) {
      return row.status == value;
    },
    pageChange(page) {
      this.params.page = page;
      this.getBorrowList();
    },
  }
};
</script>

<style>
</style>
